<template>
    <div class="cityList">
        <dl>
            <dt>
                <a>
                    <v-icon name="jingtaimoxing" />
                    <span>{{ cityList.region_name ? cityList.region_name : '' }}</span>
                </a>
            </dt>
            <dd v-for="(item, index) in cityList.children" v-if="cityList.region_name" :key="index">
                <a>
                    <v-icon name="fangdajing" />
                    <span>{{ item.region_name }}</span>
                </a>
            </dd>
        </dl>
    </div>
</template>
<script>
export default {
    props: {
        cityList: {
            type: Object,
            default: () => {
                return {}
            }
        }
    }
}
</script>
<style lang="less" scoped>
.cityList {
    dl {
        padding-top: 20px;

        dt {

            a {
                display: flex;
                gap: 6px;
                padding: 14px 20px 0 20px;
            }
        }

        dd {
            padding: 6px 0;

            a {
                display: flex;
                gap: 6px;
                padding: 10px 40px;
                border-right: transparent 3px solid;
                line-height: 16px;

                &.active {
                    border-color: var(--v-theme);
                    color: var(--v-theme);
                }
            }
        }
    }
}</style>